<template>
  <div class="catelist">
    <div class="header">
      <p>
        <span class="text1">账号:</span
        ><el-input
          v-model="name"
          style="width: 200px"
          placeholder="请输入账号"
        />
      </p>
      <p style="width: 100%;">
        <span class="text1"></span>
        <el-button type="primary" @click="ss">搜索</el-button>
        <el-button @click="getlist">重置</el-button>
        <el-button type="danger" plain>新增角色</el-button>
      </p>
    </div>
    <div class="table">
      <el-table :data="list" style="width: 100%">
        <el-table-column  label="ID" type="index" width="80px"/>
        <el-table-column prop="name" label="角色名称"/>
        <el-table-column prop="text" label="角色说明"/>
        <el-table-column label="创建时间" width="180">
          <template #default="scope">
            {{ dayjs(scope.row.time).format("YYYY-MM-DD HH:mm:ss") }}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="currentPage"
        style="padding-top: 20px"
        background
        layout="prev, pager, next"
        :total="total"
      />
    </div>
  </div>
</template>

<script setup>
import router from "@/router";
import { getData } from "@/utils/way";
import { onMounted, ref } from "vue";
import dayjs from "dayjs";
let list = ref([])
let page = ref(1)
let total = ref(-1)
let name = ref('')
const ss = async ()=>{
  let {data} = await getData('/jsb/ssrole?name=' +name.value)
  list.value = data.list
}
let getlist = async ()=>{
  let {data} = await getData('/jsb/getrole')
  list.value = data.list
  console.log(data);
}
let currentPage = (val)=>{
  page.value = val;
  getlist();
}
onMounted(()=>{
  getlist();
})
</script>

<style>
.catelist > div {
  background-color: #fff;
  padding: 20px;
}
.catelist {
  width: 100%;
}
.catelist .header {
  width: 100%;
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
}
.header p {
  width: 25%;
  height: 50px;
  line-height: 50px;
}
.table {
  margin-top: 20px;
}
.text1 {
  width: 100px;
  display: inline-block;
  text-align: right;
  padding-right: 10px;
}
</style>